<template>
	<view class="">
		<uni-forms ref="form" :label-width="labelWidth" :modelValue="formData" :rules="rules" v-bind="$attrs" :label-align="labelAlign">
			<uni-forms-item v-for="item in config" :label="item.label" :name="item.name" :key="item.name" :required="item.required" v-show="item.show==undefined?true:item.show">
				<template v-if="item.isSlot">
					<slot :name="item.name" :data="item"></slot>
				</template>
				<template v-else>
					<uni-data-select v-on="item.event" v-if="item.component ==='uni-data-select'" v-bind="item.extra"
						v-model="formData[item.name]" :inputBorder="showBorder" :border="showBorder"/>
					<uni-easyinput v-on="item.event" v-if="item.component === 'uni-easyinput'" v-bind="item.extra"
						v-model="formData[item.name]" :inputBorder="showBorder"/>
					<uni-data-checkbox v-on="item.event" v-if="item.component === 'uni-data-checkbox'"
						v-bind="item.extra" v-model="formData[item.name]" />
					<uni-data-picker v-on="item.event" v-if="item.component === 'uni-data-picker'" v-bind="item.extra"
						v-model="formData[item.name]" :border="showBorder"/>
					<uni-datetime-picker v-on="item.event" v-if="item.component === 'uni-datetime-picker'"
						v-bind="item.extra" v-model="formData[item.name]" :border="showBorder"/>
					<uni-file-picker v-on="item.event" v-if="item.component === 'uni-file-picker'" v-bind="item.extra"
						v-model="formData[item.name]"/>
					<uni-number-box v-if="item.component === 'uni-number-box'" v-bind="item.extra"
						v-model="formData[item.name]" />
				</template>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		name: 'uni-uform',
		data() {
			return {
				// 表单数据
				// formData: {}
			}
		},
		model: {
			prop: 'formData',
			event: 'input'
		},
		props: {
			config: {
				type: Array
			},
			rules: {
				type: Object
			},
			formData: {
				type: Object
			},
			labelWidth: {
				type: Number,
				default: 75
			},
			labelAlign: {
				type: String,
				default: "right"
			},
			showBorder:{
				type: Boolean,
				default: false
			}
		},
		mounted(){
			for(const key in this.config){
				//组件加载字典数据
				if(this.config[key].extra && this.config[key].extra.dict){
					if(this.config[key].extra){
						this.config[key].extra['localdata']=[];
					}
					this.getDicts(this.config[key].extra.dict).then(res=>{
						if(res.data&&res.data.length>0){
							res.data.map(item=>{
								this.config[key].extra['localdata'].push({
									text:item.dictLabel,
									value:item.dictValue
								});
							});
						}
					});
				}
				if(this.config[key].init){
					this.config[key].init();
				}
			}
		},
		methods: {
			getForm() {
				return this.$refs.form
			}
		}
	}
</script>

<style scoped>
	.uni-forms-item{
		margin-bottom: 0;
		padding:10px 16px;
		border-bottom: 1px solid #F1F1F1;
	}
	.uni-forms-item__content{
		text-align: right;
	}
	/* .uni-easyinput__content-textarea{
		padding-left:10px;
	} */
	.uni-select{
		border:none !important;
	}
	/* uni-textarea{
		padding-left:10px;
	} */
	.uni-stat-box .uni-select{
		border:none;
	}
</style>